<template>
  <!-- <van-list
    v-model:loading="loading"
    :finished="finished"
    :offset="48"
    finished-text="没有更多了"
    @load="onLoad"
  > -->
  <div class="workbench">
    <div class="bg_img"></div>
    <UserInfoCom
      @handleInfo="handleInfo"
      :userName="userData.nickName || ''"
      :depName="userData.orgName || ''"
    />

    <div class="mk_box">
      <div
        class="mk_item"
        v-for="item in imgs"
        :key="item.img"
        @click="goPath(item.path)"
      >
        <van-image width="44px" height="44px" fit="cover" :src="item.img" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="work_box">
      <h2 class="work_title">应用工作台</h2>
      <div class="work_content">
        <div class="mk_item" v-for="item in works" :key="item.img">
          <van-image width="44px" height="44px" fit="cover" :src="item.img" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>

    <SearchCom class="search_box" @searchEvent="searchEvent" />
    <div class="equipment_box">
      <!-- <PlanItem v-for="item in planList" :key="item.id" :data="item" /> -->
      <EquipmentItem
        v-for="item in planList"
        :key="item.id"
        :data="item"
        @click="handleEquipmentItem(item)"
      />
    </div>
    <van-overlay :show="showOverlay" class-name="loading_overlay">
      <van-loading class="loading" type="spinner" color="#1989fa" />
    </van-overlay>
  </div>
  <!-- </van-list> -->
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getLoginUserAPi } from '@/api/login.js';
import { getBacklogList } from '@/api/potInspectionPlan.js';
const router = useRouter();

import useStore from '@/stores';
const { userStore } = useStore();
const { setUserInfo, getUserInfo, userInfo } = userStore;
// import { storeToRefs } from 'pinia';
// 使用storeToRefs可以保证解构出来的数据也是响应式的
// const { count } = storeToRefs(counter)

import pointInspection from '@/assets/images/pointInspection.png';
import ticket from '@/assets/images/ticket.png';
import maintenance from '@/assets/images/maintenance.png';
import notifyMe from '@/assets/images/notifyMe.png';
import equipment from '@/assets/images/equipment.png';
import aiModel from '@/assets/images/aiModel.png';
const showOverlay = ref(false);
const imgs = [
  {
    img: pointInspection,
    path: '/pointInspection',
    name: '我的点巡检',
  },
  {
    img: ticket,
    path: '/ticket',
    name: '我的工单',
  },
  {
    img: maintenance,
    path: '/maintenancePlan',
    name: '我的保养',
  },
  {
    img: notifyMe,
    path: '/notifyMe',
    name: '知会我的',
  },
];
const works = [
  {
    img: equipment,
    path: '1',
    name: '设备档案',
  },
  {
    img: aiModel,
    path: '2',
    name: 'Ai大模型',
  },
];

const userData = ref({});
onBeforeMount(() => {
  getLoginUserAPi().then((res) => {
    setUserInfo(res.data);
    userData.value = getUserInfo();
  });
});
onMounted(() => {
  getList();
});
const planList = ref([]);
const total = ref(0);
const deviceId = ref('');
const searchData = reactive({
  pageNumber: 1,
  pageSize: 10,
  deviceType: '',
  keywords: '',
});
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  setTimeout(async () => {
    loading.value = true;
    await getList();
    searchData.pageNumber++;
  }, 500);
};

// function getList() {
//   getSpotInspectionPlanList(searchData)
//     .then((res) => {
//       total.value = res.data.total || 0;
//       planList.value = [...planList.value, ...res.data.list] || [];
//       loading.value = false;
//       if (planList.value.length >= total.value) {
//         finished.value = true;
//       }
//     })
//     .catch((err) => {
//       console.log('err', err);
//     })
//     .finally(() => {
//       loading.value = false;
//     });
// }
function getList() {
  showOverlay.value = true;
  getBacklogList(deviceId.value)
    .then((res) => {
      if (res.code == 200) {
        planList.value = res.data || [];
      }
    })
    .catch((err) => {
      console.log('err', err);
    })
    .finally(() => {
      showOverlay.value = false;
    });
}
function handleInfo(data) {
  router.push({ path: '/myinfo' });
}
function goPath(path, query) {
  router.push({ path });
}
function handleEquipmentItem(item) {
  router.push({
    name: 'inspectionTask',
    params: {
      type: 1,
      id: item.id,
    },
  });
}

function searchEvent(val) {
  /*  searchData.keywords = val;
  searchData.pageNumber = 1;
  planList.value = []; */
  deviceId.value = val && Number(val);
  getList();
}
</script>

<style scoped lang="scss">
.workbench {
  padding: 0 0 24px 0;
  width: 100%;
  .bg_img {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    background: url('@/assets/images/backImg.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 455px;
  }
  .work_content,
  .mk_box {
    padding: 0 12px;
    margin: 26px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mk_item {
    text-align: center;
  }

  .work_box {
    width: 100%;
    min-height: 127px;
    background: #ffffff;
    padding: 12px 18px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px #e8f2ff;
    border-radius: 10px;
    .work_content {
      gap: 0 1rem;
      flex-wrap: wrap;
      justify-content: start;
    }
    .work_title {
      height: 24px;
      font-weight: bold;
      font-size: 15px;
      color: #333333;
    }
  }

  .search_box {
    margin: 16px 0;
  }
  .equipment_box {
  }
}
</style>
